<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Client</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="client.css">
</head>
<body>
  <div id="app">
    <div class="video">
      <video class="remote" ref="remoteVideo" autoplay playsinline></video>
      <video class="local" ref="localVideo" muted autoplay playsinline></video>
    </div>
    <div class="tools container-fluid" v-if="isPrepared">
      <button
        class="btn mx-2 mb-4"
        v-bind:class="[isCalling ? 'btn-secondary' : openVideo ? 'btn-primary' : 'btn-success']"
        v-on:click="switchMode"
        v-bind:disabled="isCalling"
      >
        切换成{{ openVideo ? '音频' : '视频' }}
      </button>
      <button
        class="btn mx-2 mb-4"
        v-bind:class="[isCalling ? 'btn-secondary' : 'btn-danger']"
        v-on:click="onCallOut"
        v-bind:disabled="isCalling"
      >
        呼叫
      </button>
      <button
        class="btn mx-2 mb-4"
        v-bind:class="[!isCalling ? 'btn-secondary' : 'btn-danger']"
        v-on:click="onHungUp"
        v-bind:disabled="!isCalling"
      >
        挂断
      </button>
    </div>
  </div>

  <script id="eruda_script_el">
    ; (function () {
      const erudaScript = document.createElement('script');
      document.body.appendChild(erudaScript);
      erudaScript.src = 'https://cdn.bootcss.com/eruda/2.2.0/eruda.js';
      erudaScript.onload = function () {
        eruda && eruda.init();
        sessionStorage.setItem('eruda_console', 'true');
      }
    })();
  </script>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="client.js"></script>
</body>
</html>
